import React, { useEffect } from 'react';
import { Tag } from 'antd';
import type { FormItem } from './DynamicForm';
import './SelectedFilterTags.css';

interface SelectedFilterTagsProps {
  /** 已选择的筛选条件 */
  selectedValues: Record<string, unknown>;
  /** 表单项配置列表，用于获取字段标签 */
  items: FormItem[];
  /** 移除单个筛选条件的回调函数 */
  onRemoveCondition: (fieldName: string) => void;
  /** 清空所有筛选条件的回调函数 */
  onReset: () => void;
}

/**
 * 已选筛选条件标签组件
 * 用于展示用户已选择的筛选条件，并支持单个删除和全部清空操作
 */
const SelectedFilterTags: React.FC<SelectedFilterTagsProps> = ({
  selectedValues,
  items,
  onRemoveCondition,
  onReset
}) => {
  // 获取字段标签
  const getFieldLabel = (fieldName: string): string => {
    const field = items.find(item => item.name === fieldName);
    return field ? field.label : fieldName;
  };

  // 格式化字段值为可读文本
  const formatFieldValue = (fieldName: string, value: unknown): string => {
    const field = items.find(item => item.name === fieldName);
    
    // 如果是选项类型，查找对应的标签
    if (field?.options && Array.isArray(field.options) && value !== undefined && value !== null) {
      if (Array.isArray(value)) {
        // 多选情况
        return value
          .map(val => {
            const option = field.options?.find(opt => opt.value === val);
            return option ? option.label : String(val);
          })
          .join('、');
      } else {
        // 单选情况
        const option = field.options?.find(opt => opt.value === value);
        return option ? option.label : String(value);
      }
    }
    
    // 处理布尔值
    if (typeof value === 'boolean') {
      return value ? '是' : '否';
    }
    
    // 处理级联选择器的值
    if (Array.isArray(value) && value.length > 0 && !field?.options) {
      return value.join(' / ');
    }
    
    // 处理自定义类型的值
    if (field?.type === 'custom' && value && typeof value === 'object') {
      // 将对象的键和值都循环展示
      return Object.entries(value).map(([key, val]) => `${key}: ${val}`).join('，');
    }
    
    // 其他类型直接转换为字符串
    return value !== undefined && value !== null ? String(value) : '';
  };

  // 检查是否有已选条件
  const hasSelectedValues = Object.keys(selectedValues).length > 0;
  useEffect(() => {
    // 当有已选条件时，触发列表更新
    console.log('selectedValues 发生变化，触发列表更新',selectedValues);
  }, [selectedValues]);
  return (
    <>{
      hasSelectedValues ? (
        <div className="selected-filter-tags-container">
          <div className="selected-filter-tags-label">已选条件：</div>
          <div className="selected-filter-tags-list">
            {Object.entries(selectedValues).map(([fieldName, value]) => {
              const displayValue = formatFieldValue(fieldName, value);
              if (displayValue) {
                return (
                  <Tag 
                    key={fieldName} 
                    color="rgba(43, 160, 127, 0.05)" 
                    closable
                    style={{color:'var(--primary-color)',margin:0}}
                    className="selected-filter-tag"
                    onClose={(e) => {
                      e.stopPropagation();
                      onRemoveCondition(fieldName);
                    }}
                  >
                    {getFieldLabel(fieldName)}：{displayValue}
                  </Tag>
                );
              }
              return null;
            })}
          </div>
          <div 
            className="selected-filter-tags-clear"
            onClick={onReset}
          >
            清空筛选
          </div>
        </div>
      ) : (
        <div className="selected-filter-tags-empty">
          暂无筛选条件
        </div>
      )
    }</>
  );
};

export default SelectedFilterTags;